<template>
	<gzPageWrapper ref="gzPageWrapperRef"
		:nav="{ title: 'CDK详情',leftIcon:'left'}"
		:up="{ use: false, auto: false, page: { num: 1, size: 10 }, textNoMore: '--暂无更多--', empty: { use: false } }"
		:down="{ auto: false, auto: false }"
		>
		<template #default>
			<view class="container">
				<view class="top">
					<view class="topImg" v-if="vdata.detailType !='look'">
						<!-- <image v-if="vdata.detailType != '0'" :src="vdata.detailInfo.goodsImgListBig" mode="aspectFill"></image> -->
						<image v-if="vdata.detailInfo.goodsImgListBig?.substring(0, 2) === '//'" :src="vdata.detailInfo.goodsImgListBig.split('url=')[1]" mode="aspectFill"></image>
						<image v-else :src="vdata.detailInfo.goodsImgListBig" mode="aspectFill"></image>
						
					</view>
					<!-- 查看的详情 -->
					<view class="topImg" v-else >
						<image :src="vdata.detailInfo?.imgUrl" mode="aspectFill"></image>
					</view>
					
					<view class="textDes">
						<view class="title" v-if="vdata.detailType !='look'">{{vdata.detailInfo.goodsName}}</view>
						<!-- 查看的详情 -->
						<view class="title" v-else>{{vdata.detailInfo.name}}</view>
						
						<view class="score">
							<view class="text">消耗福分：</view>
							<view class="num">{{vdata.detailInfo.scoreNeed}}</view>
						</view>
						<view class="line"></view>
						<view class="time" v-if="vdata.detailType == 'look'">
							<view class="icon">
								<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/61588575-5bd3-42e9-99ee-6cee9419e681.png" mode="aspectFill"></image>
							</view>
							<!-- <view class="date" v-if="vdata.detailType != '0'">
								有效期至{{vdata.detailInfo.overTime}}
							</view> -->
							<view class="date" >
								有效期至{{vdata.detailInfo.eTime}}
							</view>
							
						</view>
					</view>
				</view>
				
				
				<view class="useRule" v-if="vdata.detailType !='look'">
					<view class="bigTitle">
						<view class="text">使用规则</view>
						<view class="bg"></view>
					</view>
					<text>
						 {{ vdata.detailInfo?.goodsDetail }}
					</text>
					<view class="line">
						
					</view>
				</view>
				<!-- 查看的详情 -->
				<view class="useRule" v-else>
					<view class="bigTitle">
						<view class="text">使用规则</view>
						<view class="bg"></view>
					</view>
					<text>
						 {{ vdata.detailInfo?.remark }}
					</text>
					<view class="line">
						
					</view>
				</view>
				
				<view class="btnCon">
					<view class="btn" @click="exchangeCDK" v-if="vdata.detailType !='look'">
						立即兑换
					</view>
					
				</view>
			</view>
		</template>
		</gzPageWrapper>
		<uni-popup ref="popup" type="center" :mask-click="true" border-radius="10px 10px 0 0">
			<view class="dialog">
				<view class="title">CDK兑换</view>
				<view class="con">
					<view class="text">兑换码：</view>
					<view class="cdkText">
						{{textContent}}
					</view>
					<!-- <input type="text" class="uni-input" v-model="account"  placeholder="请输入正确的充值账号" /> -->
				</view>
				<view class="btn">
					<view class="cancel" @click="cancel">取消</view>
					<view class="confirm" @click="confirm(textContent)">复制</view>
				</view>
				<view class="close" @click="close">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b81785e4-6323-4934-9dec-9403c6815dea.png" mode="aspectFill"></image>
				</view>
			</view>
		</uni-popup>
	
</template>

<script setup>
	import {ref,reactive} from 'vue'
	import { onShow, onLoad, onPageScroll, onHide } from '@dcloudio/uni-app';
	import { $virtualCreateOrder,$fansCatcdk } from '@/http/apiManager.js';
	const textContent = ref('')
	const popup = ref()
	const vdata = reactive({
		detailInfo:{},
		detailType:''
	})
	const exchangeCDK = () =>{
		$fansCatcdk({fansAwardId:vdata.detailInfo.fansAwardId}).then(res=>{
			console.log(res,'cdk码')
			textContent.value = res.bizData
		})
		popup.value.open()
	}
	
		onLoad(({detailData,detailType})=>{
			// console.log()
			console.log(JSON.parse(decodeURIComponent(detailData)),detailType,'CDK详情')
			vdata.detailType = detailType
			vdata.detailInfo = JSON.parse(decodeURIComponent(detailData))
			console.log(vdata.detailInfo,8888999)
			
			
			// 去请求CDK
			// $virtualCreateOrder({
			// 	scoreExchangeId:vdata.detailInfo.scoreExchangeId,
			// 	}).then(res=>{
			// 		console.log(res,'CDK请求内容')
			// })
		})
	
	// 复制文本
	const confirm = (item) => {
		uni.setClipboardData({ data: item })
	}
	// 关闭
	const close = () =>{
		popup.value.close()
	}
	// 取消
	const cancel = () =>{
		popup.value.close()
	}
</script>
<style lang="less" scoped>
	.dialog{
		width: 620rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 42rpx 40rpx 60rpx 40rpx;
		box-sizing: border-box;
		position: relative;
		.close{
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			top: 24rpx;
			right: 42rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.title{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 32rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.con{
			display: flex;
			align-items: center;
			margin-top: 60rpx;
			.text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-right: 12rpx;
			}
			.uni-input{
				border: 1px solid #DDDDDD !important;
				border-radius: 8rpx;
				height: 64rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;
			.cancel{
				width: 144rpx;
				height: 64rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #24C789;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #24C789;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-right: 60rpx;
			}
			.confirm{
				width: 144rpx;
				height: 64rpx;
				background: #24C789;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}
	.container{
		width: 100%;
		height:100%;
		// min-height: 100vh;
		background-color: #F7F8FB;
		.top{
			// width: 100%;
			// height: 100%;
			background-color: #fff;
			.topImg{
				width: 750rpx;
				height: 750rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.textDes{
				width: 750rpx;
				height: 258rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-top: 34rpx;
				}
				.score{
					display: flex;
					align-items: center;
					margin-top: 40rpx;
					.text{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #FF8833;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.num{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 50rpx;
						color: #FF8833;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
				.line{
					width: 686rpx;
					height: 0rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 2rpx solid #EFEFEF;
					margin-top: 28rpx;
				}
				.time{
					display: flex;
					align-items: center;
					width: 100%;
					// height: 28rpx;
					
					margin-top: 30rpx;
					.icon{
						width: 36rpx;
						height: 36rpx;

						image{
							width: 100%;
							height: 100%;
						}
					}
					.date{
						margin-left: 10rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #999999;
						// line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}
			
		}
		
		
		.useRule{
			// width: 100%;
			// height: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			.bigTitle{
				position: relative;
				margin-bottom: 40rpx;
				.text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					
				}
				.bg{
					position: absolute;
					bottom: -14rpx;
					left: 0;
					width: 160rpx;
					height: 10rpx;
					background: #24C789;
					border-radius: 5rpx 5rpx 5rpx 5rpx;
				}
				
			}
			
		}
		.btnCon{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750rpx;
			height: 176rpx;
			
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(193,191,191,0.5);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			.btn{
				width: 686rpx;
				height: 88rpx;
				background: #FF8833;
				border-radius: 43rpx 43rpx 43rpx 43rpx;
				text-align: center;
				line-height: 88rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}
	
</style>